<template>
  <div class="footer-container">
    <!-- 上方盒子 -->
    <div class="top-box">
      <div class="content">
        <a href="/">
          <img src="../assets/image/logo_urbanplate--white.svg" alt="logo">
        </a>
        <p>
          Urban Plate is a side project of
          <a
            href="https://twitter.com/intent/tweet?text=Check%20out%20Urban%20Plate!%20A%20project%20by%20Corey%20Ginnivan"
            target="_blank">Corey Ginnivan</a>.
        </p>
      </div>
    </div>

    <!-- 大屏下方盒子 -->
    <div class="bottom-box">
      <div class="large-box">
        <div class="box-left">
          <a href="/about">About Urban Plate</a>
          <a href="/legal">Terms & Legal</a>
          <a href="mailto:corey@ginnivan.net?subject=Hey%20Corey%20%F0%9F%91%8B">Contact Us</a>
        </div>
        <div class="box-right">
          <a href="https://www.instagram.com/UrbanPlateCo" target="_blank" rel="noopener noreferrer"
             class="instagram-link">
            Instagram <img src="../assets/image/icon_instagram--white.svg" alt="">
          </a>
        </div>
      </div>

      <!-- 小屏幕盒子 -->
      <div class="small-box">
        <a href="/about">About Urban Plate</a>
        <a href="/legal">Terms & Legal</a>
        <a href="mailto:corey@ginnivan.net?subject=Hey%20Corey%20%F0%9F%91%8B">Contact Us</a>
        <a href="https://www.instagram.com/UrbanPlateCo" target="_blank" rel="noopener noreferrer"
           class="instagram-link">
          Instagram <img src="../assets/image/icon_instagram--white.svg" alt="">
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 你的逻辑代码可以在这里编写
</script>

<style scoped lang="scss">
.footer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: black;

  .top-box {
    padding: 20px;

    .content {
      display: flex;
      align-items: center;

      a{
        color: white;

        &:hover {
          color: #cccccc;
        }
      }

      @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;

        img {
          margin: 10px 0;
        }
      }
    }

    img {
      width: 80px;
      margin-right: 10px;
      transition: transform 0.3s ease;

      &:hover {
        transform: rotate(-15deg);
      }
    }

    p {
      color: white;
      margin-left: 10px;
    }
  }

  .bottom-box {
    padding: 10px 20px;

    .large-box {
      display: flex;
      justify-content: space-between;

      .box-left {
        display: flex;
        align-items: center;

        a {
          font-size: 14px;
          color: white;
          margin-right: 20px;
          text-decoration: none;
          transition: text-decoration 0.3s ease;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .box-right {
        display: flex;
        align-items: center;

        .instagram-link {
          font-size: 14px;
          color: white;
          display: flex;
          align-items: center;
          text-decoration: none;
          transition: text-decoration 0.3s ease;

          &:hover {
            text-decoration: underline;
          }

          img {
            margin-left: 10px;
            width: 20px;
          }
        }
      }
      @media (max-width: 768px) {
        display: none;
      }
    }

    .small-box {
      display: none;

      @media (max-width: 768px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        text-align: center;
        padding: 5px;

        a {
          color: white;
          justify-self: center;
          display: flex;
          align-items: center;
          text-decoration: none;
        }

        .instagram-link{
            img {
              margin-left: 10px;
              width: 20px;
            }
        }
      }
    }
  }
}
</style>
